<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>发布项目</title>

    <!-- Css (necessary Css) -->
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap.min.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/bootstrap-theme.css')}"
          media="all">
    <link rel="stylesheet"
          th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/language-selector-remove-able-css.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/flexslider.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/style.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/plugin.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/menu.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/responsive.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/color.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/iconmoon.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/themetypo.css')}"
          media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/assets/css/widget.css')}" media="all">
    <link rel="icon" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/images/favicon.ico')}"
          type="image/x-icon"/>
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/layui/css/layui.css')}" media="all">
    <link rel="stylesheet" th:href="${@mvcResourceUrlProvider.getForLookupPath('/ep/css/eleTree.css')}" media="all">
    <!-- jQuery (necessary JavaScript) -->
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/bootstrap.min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/modernizr.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/menu.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/jquery.flexslider-min.js')}"></script>
    <script type="text/javascript"
            th:src="${@mvcResourceUrlProvider.getForLookupPath('/assets/scripts/functions.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/layui/layui.js')}"></script>
    <script th:src="${@mvcResourceUrlProvider.getForLookupPath('/ep/js/common/common.js')}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <![endif]-->
    <style>
        .edit-top-bnts {
            float: right;
        }

        .my_icon {
            margin-right: 4px;
            line-height: 56px;
            padding-left: 6px;
            width: 10px;
            color: #DEE0E1;
            font-size: 20px;
        }

        .done span i {
            color: #FE6500;
        }

        .done span {
            font-weight: bold
        }

        .success span i {
            color: #00CBA6;
        }

        .nav_item {
            font-size: 18px;
            cursor: pointer;
        }

        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-small_label {
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 50px;
            color: #7a8087;
        }

        .img_div {
            background-color: #f8f8f9;
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 10px;
            border: #DEE0E1 solid 1px;
            text-align: center;
            font-size: 16px;
        }
        .img_div:focus {
            border-color: #94b2fa !important;
            box-shadow: 0 0 0 3px rgba(90, 139, 255, 0.2);
        }
    </style>
</head>
<body>
<!-- Header -->
<div th:replace="../templates/ep/front/crowd/header :: main-header"></div>
<!-- Header -->
<!-- body-->
<div class="layui-container" style="border-top: #DEE0E1  solid 1px;">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md4">
            <h3 style="font-size: 30px;">编辑项目资料</h3>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            <div id="btns" class="edit-top-bnts">
                <div id="preview" class="layui-btn" style="background-color: #FE6500;width: 90px; height: 40px">
                    <span>预览</span>
                </div>
                <div id="confirm" class="layui-btn hidden" style="background-color: #FE6500;width: 90px;height: 40px">
                    <span>提交审核</span>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin-top: 50px;border: #DEE0E1  solid 1px">
        <div id="project_base" class="layui-col-md2 nav_item layui-col-md-offset1">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>基础信息</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_material" class="layui-col-md2 nav_item done">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>项目素材</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_detail" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>详情编辑</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_reward" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>回报设置</span>
            <span><i class="layui-icon my_icon">&#xe602;</i></span>
        </div>
        <div id="project_team" class="layui-col-md2 nav_item">
            <span><i class="layui-icon my_icon">&#x1005;</i></span>
            <span>团队成员</span>
            <!--            <span><i class="layui-icon my_icon done">&#xe602;</i></span>-->
        </div>
    </div>
</div>
<div class="layui-container">
    <form class="layui-form" action="" style="margin-top: 50px">
        <div class="layui-form-item">
            <label class="ep-form-label ep-form-item-require">首页广告图</label>

            <input type="text" name="ad" id="ad" required data-th-value="${project.ad}"
                   autocomplete="off" class="layui-input hidden">
            <div class="img_div" style="width: 300px; height: 200px;padding-top: 90px;" id="ad_img">
                <span><i class="layui-icon" -icon>&#xe624;</i>上传图片(3:2)</span>
            </div>
            <label class="prompt-txt layui-input-block">尺寸 300px*200px，格式 jpg、png，分辨率 72 像素／英寸，不大于500kb</label>
        </div>
        <div class="layui-form-item">
            <label class="ep-form-label ep-form-item-require">项目封面图</label>
            <input type="text" class="hidden layui-input" name="projectId" data-th-value="${project.projectId}">
            <input type="text" name="cover" id="cover" required
                   autocomplete="off" class="layui-input hidden" data-th-value="${project.cover}">
            <div class="img_div" style="width: 400px; height: 300px; padding-top: 140px;" id="cover_img">
                <span><i class="layui-icon" -icon>&#xe624;</i>上传图片(4:3)</span>
            </div>
            <label class="prompt-txt layui-input-block">尺寸 800px*600px，格式 jpg、png，分辨率 72 像素／英寸，不大于1MB</label>
        </div>
        <div class="layui-form-item">
            <label class="ep-form-label ep-form-item-require">推荐轮播图</label>
            <input type="text" name="banner" id="banner" required data-th-value="${project.banner}"
                   autocomplete="off" class="layui-input hidden">
            <div class="img_div" style="width: 640px; height: 320px;padding-top: 150px;" id="banner_img">
                <span><i class="layui-icon" -icon>&#xe624;</i>上传图片(2:1)</span>
            </div>
            <label class="prompt-txt layui-input-block">尺寸 1080px*640px，格式 jpg、png，分辨率 72 像素／英寸，不大于2MB</label>
        </div>


        <div class="layui-form-item" style="float: right">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="project_material"
                        style="background-color: #FE6500; height: 40px">保存,进入下一步
                </button>
                <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
            </div>
        </div>
    </form>
</div>
<!--// CopyRight //-->
<div th:replace="../templates/ep/front/crowd/footer :: footer"></div>
<!--// CopyRight //-->

<script th:inline="javascript">
    layui.use(['upload',"layer",'form'], function () {
        let ctx = [[@{/}]];
        var upload = layui.upload
        ,layer = layui.layer
        ,form = layui.form;

        var project = [[${project}]];
        if (project.ad != null){
            $("#cover_img").css("padding-top",0)
            $("#ad_img").css("padding-top",0)
            $("#banner_img").css("padding-top",0)
            $("#cover_img").html('<img width="400px" height="300px" id="cover_show">')
            $("#ad_img").html('<img width="300px" height="200px" id="ad_show">')
            $("#banner_img").html('<img width="640px" height="320px" id="banner_show">')

            $('#cover_show').attr('src', ctx+project.cover);
            $('#ad_show').attr('src', ctx+project.ad);
            $('#banner_show').attr('src', ctx+project.banner);

    }

        //首页广告图
        var uploadAd = upload.render({
            elem: '#ad_img', //绑定元素
            url: ctx + 'web/updateAd',
            size: 512,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    upLogoFalg = true;
                    $("#ad_img").css("padding-top",0)
                    $("#ad_img").html('<img width="300px" height="200px" id="ad_show">')
                    var img = new Image();
                    var flag = true
                    img.src = result
                    img.onload=function () {
                        if (img.width < 280 || img.width > 320){
                            flag = false;
                            layer.msg('首页广告图大小不符合,请重新选择', {icon: 5});
                        }
                        if (img.height < 180 || img.height > 220){
                            flag = false;
                            layer.msg('首页广告图大小不符合,请重新选择', {icon: 5});
                        }
                        if (flag){
                            $('#ad_show').attr('src', result);
                        }
                    }
                })
            },
            done: function (res) {
                if (res.code != 200) {
                    return  layer.msg('首页广告图上传失败,请稍后重试', {icon: 5});
                }
                $('#ad').val(res.data);
            }
        });
        //项目封面图上传
        var uploadCover = upload.render({
            elem: '#cover_img', //绑定元素
            url: ctx + 'web/updateCover',
            size: 1024,
            exts:'png|jpg',
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    upLogoFalg = true;
                    $("#cover_img").css("padding-top",0)
                    $("#cover_img").html('<img width="400px" height="300px" id="cover_show">')
                    var img = new Image();
                    var flag = true
                    img.src = result
                    img.onload=function () {0
                        if (img.width < 750 || img.width > 850){
                            flag = false;
                            layer.msg('项目封面图大小不符合,请重新选择', {icon: 5});
                        }
                        if (img.height < 550 || img.height > 650){
                            flag = false;
                            layer.msg('项目封面图大小不符合,请重新选择', {icon: 5});
                        }
                        if (flag){
                            $('#cover_show').attr('src', result);

                        }
                    }
                })
            },
            done: function (res) {
                if (res.code != 200) {
                    return  layer.msg('项目封面图上传失败,请稍后重试', {icon: 5});
                }
                $('#cover').val(res.data);
            }
        });
        //推荐轮播图
        var uploadBanner = upload.render({
            elem: '#banner_img', //绑定元素
            url: ctx + 'web/updateBanner',
            size: 2048,
            choose: function (obj) {
                obj.preview(function (index, file, result) {
                    upLogoFalg = true;
                    $("#banner_img").css("padding-top",0)
                    $("#banner_img").html('<img width="640px" height="320px" id="banner_show">')
                    var img = new Image();
                    var flag = true
                    img.src = result
                    img.onload=function () {
                        if (img.width < 1000 || img.width > 1100){
                            flag = false;
                            layer.msg('推荐轮播图大小不符合,请重新选择', {icon: 5});
                        }
                        if (img.height < 600 || img.height > 700){
                            flag = false;
                            layer.msg('推荐轮播图大小不符合,请重新选择', {icon: 5});
                        }
                        if (flag){
                            $('#banner_show').attr('src', result);
                        }
                    }

                })
            },
            done: function (res) {
                if (res.code != 200) {
                    return  layer.msg('推荐轮播图上传失败,请稍后重试', {icon: 5});
                }
                $('#banner').val(res.data);
            }
        });
        //监听提交
        form.on('submit(project_material)', function (data) {
            let index = layer.load('', {time: 5 * 1000});
            var param = data.field;
            if (param.ad == ""){
                $("#ad_img").focus()
                layer.msg('首页广告图还未选择', {icon: 5});
                return false;
             }
            if (param.cover == ""){
                $("#cover_img").focus()
                layer.msg('项目封面图还未选择', {icon: 5});
                return false;
            }
            if (param.banner == ""){
                $("#banner_img").focus()
                layer.msg('推荐轮播图还未选择', {icon: 5});
                return false;
            }
            $.ajax({
                url: "/web/updateProjectBase",
                type: "post",
                data: param,
                success: function (data) {
                    if (data.code == 200) {
                        window.location.href = "/web/project_detail?id=" + data.data;
                        layer.close(index);

                    }
                }
            })
            return false;
        });
        // 标题的点击
        $("#project_material").click(function () {
            if (project != null){
                window.location.href = "/web/project_material?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_base").click(function () {
            if (project != null){
                window.location.href = "/web/project_base?id=" + project.projectId;
            }
        })
        $("#project_detail").click(function () {
            console.log("???")
            if (project != null){
                window.location.href = "/web/project_detail?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_reward").click(function () {
            if (project != null){
                window.location.href = "/web/project_reward?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        $("#project_team").click(function () {
            if (project != null){
                window.location.href = "/web/project_team?id=" + project.projectId;
            }else{
                layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
            }
        })
        //预览

        $("#preview").click(function () {
            window.location.href = "/web/project_preView?projectId=" + project.projectId;
        })
    });
</script>
</body>
</html>